<template>
	<picker @change="bindPickerChange" :value="index" :range="range" :range-key="rangeKey">
		<view class="pickerOne">
			{{values?values:placeholder}}
		</view>	
	</picker>
</template>

<script>
	export default {
		name:"m_pickerOne",
		props: {
			value:{
				type: [String,Number],
				default: null
			},
			// 占位符
			placeholder: {
				type: String,
				default: '请选择'
			},
			range: {
				type: Array,
				default: ()=>{[]}
			},
			rangeKey:{
				type: String,
				default: 'label'
			},
			rangeID:{
				type: String,
				default: 'id'
			},
		},
		data() {
			return {
				index:0,
				values:''
			};
		},
		watch:{
			// index(val){
			// 	if(val==-1){
			// 		this.values = ''
			// 	}else{
			// 		this.values = this.range[val][this.rangeKey]
					
			// 	}
			// },
			value(val){
				this.index=this.range.findIndex(item=>item[this.rangeID]==val)
					if(this.index==-1){
						this.values = ''
					}else{
						this.values = this.range[this.index][this.rangeKey]
						
					}
				
			},
			range(newValue){
				this.index=this.range.findIndex(item=>item[this.rangeID]==this.value)
				if(this.index>-1){
					this.values = this.range[this.index][this.rangeKey]
				}
			}
		},
		mounted() {
			if(this.value && this.range && this.range.length){ 
				this.index=this.range.findIndex(item=>item[this.rangeID]==this.value)
				if(this.index>-1){
					this.values = this.range[this.index][this.rangeKey]
				}
			}
		},
		methods:{
			bindPickerChange: function(e) {
				this.index = e.detail.value;
				
				
				this.$emit('input',this.range[this.index][this.rangeID])
				this.$emit('change',{index:this.index,item:this.range[this.index]})
				
			},
		}
	}
</script>

<style lang="scss" scoped>
.pickerOne{
	padding:0 60rpx 0 30rpx;
	height: 60rpx;
	background: #FFFFFF;
	border-radius: 30rpx;
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #404040;
	line-height: 60rpx;
	position: relative;
	&:before{
		content: '';
		width: 0;
		height: 0;
		position: absolute;
		top:30rpx;
		right:30rpx;
		border-top: 10rpx solid #BBBBBB;
		border-bottom:10rpx solid transparent;
		border-left:10rpx solid transparent;
		border-right:10rpx solid transparent;
	}
}
</style>